<template>
  <div class='page-container'>
    <div>vmodel语法糖</div>
    <address>在vue3中.vmodel是input事件和modelValue属性的结合,子组件中使用
      defineProps接收modelValue属性,父组件中通过v-model绑定modelValue属性
      如果父组件使用的是v-model:showSearch 那么子组件就需要接收showSearch属性
    </address>
    <div class="vue3_4">
      <h2>我是vue3.4新特性写法</h2>
      <!-- vue2/3中.数据是单向数据流.只能父级流向子集 -->
      我是父组件要传递到子组件的数据:{{ countModel }}
      <Child v-model="countModel" />
    </div>
    <div class='vue3_3'>
      <!-- 要求  给子组件传递一个变量 foo   子组件接收.并且子组件里面需要修改.却不报错(单项数据了没问题) -->
      <!-- 最原始的写法 -->
      {{ foo }}
      <!-- <Child3 :foo="foo" @updatefoo="updatefoo" /> -->
      <!-- =  -->
      <!-- <Child3 v-model:modelValue="foo" @update:modelValue="$event => (foo = $event)" /> -->
        <!-- == -->
      <!-- <Child3 v-model="foo"></Child3> -->
    </div>

  </div>
</template>
<script setup lang='ts'>
import Child from './Children.vue'
import Child3 from './Children1-3.vue'
/**
 * 数据
 */
const countModel = ref(6);
const foo = ref(66);
/**
 * 功能方法
 */
// const updatefoo = function (res) {
//   console.log(res)
//   foo.value = res
// }
</script>
<style lang='scss' scoped>
.page-container {}

.vue3_3 {
  border: 1px solid red;
}

.vue3_4 {
  border: 3px solid rgb(233, 7, 233);
}
</style>